<template>
  <div class="app-container home">
    <div class="container">
      <div
        v-for="(item, index) in topNumberList"
        :key="index"
        class="eachClass"
        :style="item.background"
      >
        <div class="title" @click="goto(item)">{{ item.label }}</div>
        <div class="content">
          <img :src="item.path" alt="" class="img" />
          <div class="numberDw">
            <div class="number" @click="goto(item)">{{ item.number }}</div>
            <div class="dw">{{ item.dw }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div
        v-for="(item, index) in bottomNumberList"
        :key="index"
        class="eachClass"
        :style="item.background"
      >
        <div class="title" @click="goto(item)">{{ item.label }}</div>
        <div class="content">
          <img :src="item.path" alt="" class="img" />
          <div class="numberDw">
            <div class="number" @click="goto(item)">{{ item.number }}</div>
            <div class="dw">{{ item.dw }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { homePageTotal } from "@/api/homePage";
import lunbotu from "../layout/components/lunbotu/index.vue";
export default {
  name: "Index",
  components: { lunbotu },
  data() {
    return {
      topNumberList: [
        {
          label: "待处理任务数",
          dw: "项",
          number: "0",
          path: require("@/assets/images/waitdo.png"),
          background: "background-color:#3572ce",
          gopath: "/taskManage/waitCompleteTasks",
        },
        {
          label: "即将过期任务数",
          dw: "项",
          number: "0",
          path: require("@/assets/images/passTime.png"),
          background: "background-color:#899fde",
        },
        {
          label: "已过期任务数",
          dw: "项",
          number: "0",
          path: require("@/assets/images/passedTime.png"),
          background: "background-color:#457ac7",
        },
      ],
      bottomNumberList: [
        {
          label: "当前业务协同数",
          dw: "项",
          number: "0",
          path: require("@/assets/images/coperation.png"),
          background: "background-color:#2e589d",
          gopath: "/collaborationManage/waitCollaboration",
        },

        {
          label: "已处理任务数",
          dw: "项",
          number: "0",
          path: require("@/assets/images/alreadyDone.png"),
          background: "background-color:#3b7cd4",
          gopath: "/taskManage/completeTasks",
        },
        {
          label: "退回待处理任务数",
          dw: "项",
          number: "0",
          path: require("@/assets/images/reject.png"),
          background: "background-color:#1c5db5",
          gopath: "/taskManage/backCompleteTasks",
        },
      ],
    };
  },
  created() {
    this.getTotal();
  },
  mounted() {},
  methods: {
    push() {
      this.$router.push({ path: "/system/user" });
    },
    getTotal() {
      let params = {
        oucode: this.$store.state.user.oucode,
        deptId: this.$store.state.user.dept.deptId,
        userId: this.$store.state.user.userId,
      };
      homePageTotal(params).then((response) => {
        if (response.data) {
          this.topNumberList[0].number = response.data.taskNumber;
          this.topNumberList[1].number = response.data.expiringSoonTask;
          this.topNumberList[2].number = response.data.expiredTask;
          this.bottomNumberList[0].number =
            response.data.businessCollaborationNum;
          this.bottomNumberList[1].number = response.data.finishTask;
          this.bottomNumberList[2].number = response.data.returnTaskNumber;
        }
      });
      this.$store.dispatch("getTotal");
    },
    goto(item) {
      let menuList = this.$store.state.permission.homepagego;
      console.log(menuList);
      let pushList = [];
      let pathList = [];
      menuList.forEach((el) => {
        if (el.path == "/taskManage" || el.path == "/collaborationManage") {
          pushList.push(...el.children);
        }
      });
      console.log(pushList);
      pushList.forEach((el) => {
        pathList.push(el.path);
      });
      console.log(pathList);
      if (item.label == "即将过期任务数" || item.label == "已过期任务数") {
        return;
      } else {
        if (pathList.indexOf(item.gopath) !== -1) {
          console.log(item.gopath);
          this.$router.push({ path: item.gopath });
        } else {
          this.$message.warning("暂无权限，请联系管理员！");
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  background: url(../assets/images/backGround.png) no-repeat !important;
  background-size: 100% 100% !important;
  height: 100%;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.card {
  width: 290px;
  height: 96px;
  border-radius: 10px;
  color: #fff;
  padding: 10px 20px 3px 20px;
  .leftTitle {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fdfefe;
  }
}
.cardTitle {
  height: 41px;
  border-bottom: 1px solid #e4e4e4;
  font-size: 16px;
  font-family: Microsoft YaHei;
  line-height: 41px;
  font-weight: 400;
  color: #000000;
}
.secondFloor {
  margin-top: 30px;
  display: flex;
  width: 100%;
  .secondCard {
    width: 400px;
    height: 230px;
    margin-right: 20px;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    border-radius: 12px;
  }
  .thirdCard {
    width: 600px;
    height: 230px;
    margin-right: 20px;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    border-radius: 12px;
  }
  .forthCard {
    background: #ffffff;
    flex: 1;
    height: 230px;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    border-radius: 12px;
  }
}
.thirdFloor {
  display: flex;
  width: 100%;
  margin-top: 20px;
  .fifthCard {
    width: 1110px;
    height: 360px;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    border-radius: 12px;
    margin-right: 20px;
  }
  .sixthCard {
    flex: 1;
    height: 360px;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(70, 70, 70, 0.35);
    border-radius: 12px;
  }
}
.carousel {
  height: 400px;
  margin-left: 170px;
  margin-top: 150px;
  width: 1500px;
}
.el-carousel__item {
  width: 500px;
  height: 276px;
  border-radius: 10px;
  margin-left: 120px;
}
// .el-carousel__item:nth-child(2n) {
//   background-color: #66bd89;
// }

// .el-carousel__item:nth-child(2n + 1) {
//   background-color: #3f9c9c;
// }
.title {
  width: 100%;
  font-size: 35px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #fdfefe;
  margin-left: 30px;
  margin-top: 20px;
  cursor: pointer;
}
.title:hover {
  color: #3480dd;
}
.content {
  display: flex;
  width: 100%;
  height: 200px;
}
.img {
  width: 150px;
  height: 150px;
  margin-left: 20px;
  margin-top: 20px;
}
.number {
  font-size: 60px;
  color: #fff;
  cursor: pointer;
}
.dw {
  font-size: 35px;
  color: #fff;
  margin-left: 15px;
  margin-top: 15px;
}
.numberDw {
  display: flex;
  margin-top: 100px;
  margin-left: 150px;
}
.number:hover {
  color: #3480dd;
}
.img {
  width: 130px;
  height: 140px;
  margin-left: 35px;
  margin-top: 30px;
}
.container {
  display: flex;
  justify-content: space-between; //左右布局
  margin-top: 70px;
  margin-right: 30px;
  width: 100%;
  .firstImg {
    width: 500px;
    height: 276px;
    border-radius: 10px;
    margin-left: 120px;
    margin-right: 120px;
  }
  .eachClass {
    width: 500px;
    height: 276px;
    border-radius: 10px;
    margin-right: 10px;
  }
}
</style>

